import React, { Component } from 'react'
import Circle from './Circle'
import { getRom } from '../utils'
/**
 * 每隔一段时间，自动产生一个小球，各种数据随机
 */
export default class CircleList extends Component {
  constructor(props){
    super(props)
    this.state = {
      ballList:[

      ]
    }
    const height = document.documentElement.clientHeight
    const width = document.documentElement.clientWidth
    let timer = setInterval(() => {

        let info = {
          left:getRom(0, width - 100),
          top:getRom(0, height - 100),
          xSpeed:getRom(0, 1000),
          ySpeed:getRom(0, 1000),
          bg:`rgb(${getRom(0,255)},${getRom(0,255)},${getRom(0,255)})`
        }
        this.setState({
          ballList: [...this.state.ballList, info]
        })
        if (this.state.ballList.length === 10) {
          clearInterval(timer);
      }
    }, 1000);
  }
  render() {
    return (
      this.state.ballList.map(item=>
        <Circle 
        left={item.left}
        top={item.top}
        bg={item.bg}
        xSpeed={item.xSpeed}
        ySpeed={item.ySpeed}
        >CircleList</Circle>
      )
     
    )
  }
}
